import {Editor, Toolbar} from "@wangeditor/editor-for-react";
import React, {useEffect, useState} from "react";
import {IDomEditor, IEditorConfig} from '@wangeditor/editor'
import {BASE_UPLOAD_FILE} from "../../axios";
import {message} from "antd";
// 样式引入
import '@wangeditor/editor/dist/css/style.css'
import {AxiosResponse} from "axios";

interface Props {
    html: string,//当前传入的html
    setHtml: (v: string) => void,//设置html
    content?: string | null,//默认内容
    borderColor?: string
}

// 王编辑器组件
const WangEdit = React.memo(({html, setHtml, content = null, borderColor = "#ccc"}: Props) => {
    // 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例

    //异步设置 html，content变化立刻执行
    useEffect(() => {
        if (content) {
            setHtml(`<p>${content}</p>`);
        }
    }, [content])

    // 工具栏
    const toolbarConfig: any = {}
    //去除上传视频功能，移动端无法处理
    toolbarConfig.excludeKeys = [
        "group-video"
    ]
    // 初始化
    const editorConfig: Partial<IEditorConfig> | any = {
        placeholder: '请输入内容...',
        MENU_CONF: {}
    }

    type InsertFnType = (url: string) => void

    //上传图片
    editorConfig.MENU_CONF['uploadImage'] = {
        // 配置地址
        server: BASE_UPLOAD_FILE,
        // 配置请求体字段名
        fieldName: 'file',
        // 上传图片处理请求判断
        customInsert(r: AxiosResponse, insertFn: InsertFnType) {
            // 成功
            if (r.data.code >= 200 && r.data.code < 300) {
                insertFn(r.data.data.path);
            } else {
                message.error('上传图片失败');
            }
        }
    }
    //上传视频
    // editorConfig.MENU_CONF['uploadVideo'] = {
    //     server: `${BASE_URL}/upload`,
    //     fieldName:'file',
    //     customInsert(r:any,insertFn:InsertFnType){
    //         if(r.data.code>=200&&r.data.code<300){
    //             insertFn(r.data.data.url);
    //         }else{
    //             message.error('上传图片失败');
    //         }
    //     }
    // }

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null);
        }
    }, [editor]);
    return (
        <>
            <div style={{border: `1px solid ${borderColor}`, zIndex: 100}}>
                {/*工具*/}
                <Toolbar
                    editor={editor}
                    defaultConfig={toolbarConfig}
                    mode="default"
                    style={{borderBottom: '1px solid #ccc'}}
                />
                {/*内容*/}
                <Editor
                    defaultConfig={editorConfig}
                    value={html}
                    onCreated={setEditor}
                    onChange={editor => setHtml(editor.getHtml())}
                    mode="default"
                    style={{height: '300px', overflowY: 'hidden'}}
                />
            </div>
            {/*测试*/}
            {/*<div style={{marginTop: '15px'}}>*/}
            {/*    {html}*/}
            {/*</div>*/}
        </>
    )
})

export default WangEdit;